<template>
  <div class="login-container" id="building">
    <!-- <img :src="logo" alt="" class="loginbg">img_peitu -->
    <img src="../assets/img/login_bakend.png" alt="" class="loginbg"/>
    <!-- 账户登录 -->
    <div class="zhangview">
      <el-form :model="ruleForm" status-icon label-position="left" label-width="0px" v-if="isLogin" :rules="rules"
               ref="ruleForm" class="demo-ruleForm login-page">
        <span class="zhitit">{{ $t('message.projectName') }}</span>
        <el-form-item prop="username" class="popitem">
          <el-input type="text" v-model="ruleForm.username" auto-complete="off"
                    :placeholder="this.$t('message.inputUsername')"></el-input>
        </el-form-item>
        <el-form-item prop="password" class="popitem">
          <el-input type="password" v-model="ruleForm.password" auto-complete="off"
                    :placeholder="this.$t('message.inputPassword')"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%;margin-top: 60px;">
          <el-button type="primary" class="btn" style="font-size: 24px;" @click="ok()">{{
              $t('message.login')
            }}
          </el-button>
          <!-- <span class="rememberme" @click="isLoginSelect('psd')">没有帐号？点击注册</span> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {baseAPI} from '@/api/base';

export default {
  name: 'user',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('message.inputPassword')));
      } else {
        if (this.psdParams.password !== '') {
          this.$refs.psdParams.validateField('checkpassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('message.againPassword')));
      } else if (value !== this.psdParams.password) {
        callback(new Error(this.$t('message.inconsistentPassword')));
      } else {
        callback();
      }
    };
    return {
      userinfo: {},
      tishiInfo: '',
      isLogin: true,
      logo: require('@/assets/img/background.jpeg'),
      ruleForm: {
        username: '',
        password: '',
      },
      //   手机号登录验证规则
      rules: {
        username: [{required: true, message: this.$t('message.inputUsername'), trigger: 'blur'}],
        password: [{required: true, message: this.$t('message.inputPassword'), trigger: 'blur'}],
      },
      psdRule: {
        //密码修改验证
        username: [{required: true, message: this.$t('message.inputUsername'), trigger: ['change', 'blur']}],
        password: [
          {validator: validatePass, trigger: ['change', 'blur']},
          {
            min: 6,
            max: 20,
            message: this.$t('message.passwordLength'),
            trigger: 'blur',
          },
        ],
      },
      // 发送验证码的 文本 以及按钮是否可以按
      type: '',
      btnText: this.$t('message.sendCode'),
      disabled: false,
      verifyCode: '',
      identifyCode: '',
    };
  },
  mounted() {
  },
  methods: {
    getCode() {
      baseAPI
          .getCode()
          .then(res => {
            console.log(res);
          })
          .catch(error => {
          });
    },

    //用户登录
    ok() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.loading = true;
          baseAPI.userlogin(this.ruleForm).then(res => {
            console.log(res);

            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: this.$t('message.loginSuccess'),
              });
              localStorage.setItem('authorization', res.data.token);
              localStorage.setItem('user', JSON.stringify(res.data.user));
              this.$router.push('./New');
              this.loading = false;
            }
          });
        }
      });
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = '';
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)];
      }
      console.log(this.identifyCode);
    },
    getReset(type) {
      if (type == 'psd') {
        //切换至忘记密码
        this.psdParams = {
          //密码信息
          username: '', //账号
          password: '', //密码
          repassword: '', //确认密码
          code: '', //验证码
        };
        this.dialogFormUser = true;
        // 清除自动触发的表单验证
        this.$nextTick(() => {
          this.$refs['psdParams'].clearValidate();
        });
      } else if (type == 'login') {
        //切换至登录
        this.ruleForm = {
          phone: '',
          password: '',
          code: '',
          // authorityId: "",
        };
        this.dialogFormUser = true;
        // 清除自动触发的表单验证
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate();
        });
      }
    },

    validatePass(rule, value, callback) {
      if (value === '') {
        callback(new Error(this.$t('message.inputPassword')));
      } else {
        if (this.psdParams.password !== '') {
          this.$refs.psdParams.validateField('checkpassword');
        }
        callback();
      }
    },
    validatePass2(rule, value, callback) {
      if (value === '') {
        callback(new Error(this.$t('message.againPassword')));
      } else if (value !== this.psdParams.password) {
        callback(new Error(this.$t('message.inconsistentPassword')));
      } else {
        callback();
      }
    },
    headClick(e) {
      this.head = e;
    },
  },
};
</script>
<style scoped lass>
#building {
  /* background: url("../assets/img/background.jpeg"); */
  /* require('@/assets/common/logo1.png') */
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.login-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.zhitit {
  font-weight: 500;
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 38px;
  display: block;
}

.popitem {
  width: 315px;
}

.zhangview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 180px;
}

.login-page {
  /* -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 50px auto;
  width: 410px;
  padding: 35px 35px 15px;
  z-index: 1; */
  /* width: 562px;
  height: 538px; */
  padding: 40px 53px;
  background: #15151d;
  border-radius: 27px;
  position: relative;
}

.nheader {
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px 0px 0;
  margin-bottom: 25px;
}

.nitem {
  width: 35%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0px 0 10px;
  cursor: pointer;
}

.xian {
  background-color: #fc333e;
  width: 40%;
  position: absolute;
  left: 30%;
  height: 2px;
  border-radius: 10px;
  bottom: 0;
  display: none;
}

.nitemname {
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

.logoview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.mingtou {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.nactive .xian {
  display: inline-block;
}

.iname {
  color: #333;
  font-size: 13px;
  font-weight: 400;
  /* background-color: #fc333e; */
}

.el-tabs__nav-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.xing {
  color: red;
  display: inline-block;
  margin-right: 4px;
}

.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
  color: #fc333e;
}

.captcha_code img {
  width: 100px;
  height: 40px;
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
}

.captcha_code span {
  color: #2984f5;
  cursor: pointer;
}

.captcha_code {
  display: flex;
  align-items: center;
}

.rememberme {
  color: #fc333e;
  margin-bottom: 0px;
  display: block;
  text-align: right;
  cursor: pointer;
}

.bind_code {
  position: relative;
  display: flex;
  flex-direction: row;
}

.bind_code .el-input {
  /* width: 70%; */
}

.bind_code .el-input__inner {
  width: 328px;
  height: 44px;
  background: #f7f7f7;
  border-radius: 4px;
  border: 1px solid #e4e4e4;
  outline: none;
  padding: 0 100px 0 10px;
}

.bind_code .el-button {
  /* padding: 0;
  border-radius: 4px; */
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  margin-left: auto;
}

.bind_code_gain {
  position: absolute;
  top: calc(50% - 9px);
  right: 30px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #20aee5;
  line-height: 18px;
  cursor: pointer;
  padding-left: 10px;
  border-left: 1px solid #d8d8d8;
}

.loginbg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.el-form-item {
  margin-bottom: 30px;
}

.yanzheng {
  position: absolute;
  right: 30px;
  color: #666;
}

.btn {
  height: 38px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
}
</style>
<style>
.popitem .el-input__inner {
  background-color: #0a0b0d !important;
  border-radius: 10px;
  border: 1px solid #0a0b0d;
  color: #fff;
}
</style>
